/**
 * @author:linjiye
 * @date: 2024/12/23
 * @desc:
 **/

import {StyleSheet, View, Text} from 'react-native'
import React, {useEffect, useState} from 'react'
// import Svg, {Text, Defs, LinearGradient, Stop} from 'react-native-svg';
import {useSegments} from "expo-router";
import {useRandomCode} from "@/hooks/useRandomCode"

type Props = {
    textName: any,
    fontSize?: number,
    colorList? : Array<any>
}


const LinearGradientText = ({textName, fontSize = 14,colorList}: Props) => {
    const segments = useSegments()
    const [currentRouteName,setCurrentRouteName] = useState('')
    const [currentTimestamp,setCurrentTimestamp] = useState(Date.now())
    const [randomCode,setRandomCode] = useState(useRandomCode(8)) // 生成 8 位随机码
    const [id,setId] = useState('page')
    useEffect(() => {
        const routeName = segments[segments.length - 1]; // 当前路由名
        setCurrentRouteName(routeName)
        setId(currentRouteName+currentTimestamp+randomCode)
    }, []);

    return (
        // <View>
        //     <Svg height="100%" width="100%" style={styles.container}>
        //         <Defs>
        //             <LinearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
        //                 {colorList?.map((item, index) => (
        //                     <Stop key={index} offset={item.offset} stopColor={item.stopColor} stopOpacity={item.stopOpacity}/>
        //                 ))}
        //                 {/*<Stop offset="0%" stopColor="#2856FF" stopOpacity="1"/>*/}
        //                 {/*<Stop offset="100%" stopColor="#BE46FF" stopOpacity="1"/>*/}
        //             </LinearGradient>
        //         </Defs>
        //         <Text
        //             fill={`url('#${id}')`}
        //             fontSize={fontSize}
        //             fontWeight="bold"
        //             x="50%"// 设置为 SVG 的宽度的一半
        //             y="50%"// 设置文本的垂直位置
        //             textAnchor="middle" // 使文本居中
        //             dominantBaseline="middle" // 垂直居中
        //             // transform="rotate(0 100 100)" // 旋转45度，旋转中心为(100, 100)
        //         >
        //             {textName}
        //         </Text>
        //     </Svg>
        <View style={styles.container}>
           <Text style={{color: 'rgba(51,77,176,1)', fontSize: fontSize}} numberOfLines={1} ellipsizeMode="tail">{textName}</Text>
        </View>
        // </View>
    )
}

export default LinearGradientText

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: "center",
    },
})